<template>
    <div class="researchExamine">
        <div class="header">
            <van-nav-bar title="审批数据" left-arrow @click-left="router.back()" />
        </div>
        <div class="content">
            <div class="content_children" v-for="(item, index) in contentList" :key="index"
                :style="{ marginBottom: index == contentList.length - 1 ? '5.3vw' : '' }">
                <div class="headers">
                    <div class="line"></div>
                    <div class="title">{{ item.contentTitle }}</div>
                </div>
                <div class="child_data" :style="{ marginBottom: ins == item.children.length - 1 ? '' : '2.6vw' }"
                    v-for="(it, ins) in item.children" :key="ins" @click="linkTo(it.title)">
                    <van-image :src="it.icon"></van-image>
                    <div class="child_right">
                        <div class="titles">{{ it.title }}</div>
                        <div class="contents">{{ it.content }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const icon_bianjiashenpi = new URL("@/assets/research/icon_bianjiashenpi.png", import.meta.url).href;
const icon_hejiachushen = new URL("@/assets/research/icon_hejiachushen.png", import.meta.url).href;
const icon_hejiafushen = new URL("@/assets/research/icon_hejiafushen.png", import.meta.url).href;
const icon_rukushenpi = new URL("@/assets/research/icon_rukushenpi.png", import.meta.url).href;
const icon_wuhetongruku = new URL("@/assets/research/icon_wuhetongruku.png", import.meta.url).href;
const icon_zongjianchushen = new URL("@/assets/research/icon_zongjianchushen.png", import.meta.url).href;
const icon_zongjianfuhe = new URL("@/assets/research/icon_zongjianfuhe.png", import.meta.url).href;
const icon_zuzhangshenpi = new URL("@/assets/research/icon_zuzhangshenpi.png", import.meta.url).href;

const contentList = ref([
    {
        contentTitle: '研发审批', children: [
            { icon: icon_zuzhangshenpi, title: '组长审批', content: '研发组组长审批', },
            { icon: icon_zongjianfuhe, title: '总监初审', content: '总监上架前审批', },
            { icon: icon_zongjianchushen, title: '总监审批', content: '总监核价前复核', },
        ]
    },
    {
        contentTitle: '核价审批', children: [
            { icon: icon_hejiachushen, title: '核价初审', content: '资质与价格' },
            { icon: icon_hejiafushen, title: '核价复审', content: '价格复核', },
        ]
    },
    {
        contentTitle: '产品部相关审批', children: [
            { icon: icon_wuhetongruku, title: '无合同入库', content: '供销合同审批', },
            { icon: icon_rukushenpi, title: '入库审批', content: '产品部审批入库', },
            { icon: icon_bianjiashenpi, title: '变价审批', content: '已入库商品改价', },
        ]
    }
])
/** 跳转 */
const linkTo = (title: string) => {
    router.push({
        path: '/researchExamineList',
        query: {
            title,
        }
    })
}
</script>
<script lang="ts">
export default { name: 'researchExamine' }
</script>
<style lang="less" scoped>
.researchExamine {
    width: 100%;
    height: 100vh;
    background-color: #f6faff;
    box-sizing: border-box;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        z-index: 6003;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .content {
        width: 100%;
        height: calc(100vh - 90px);
        background: #F6FAFF;
        box-sizing: border-box;
        padding: 0 15px;
        overflow-y: auto;

        .headers {
            display: flex;
            align-items: center;
            margin: 15px 0 10px 0;

            .line {
                width: 2px;
                height: 16px;
                background: #0094FF;
                border-radius: 1px;
                margin-right: 5px;
            }

            .title {
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
                line-height: 16px;
            }
        }

        .child_data {
            width: 345px;
            height: 74px;
            background: #FFFFFF;
            box-shadow: 2px 2px 4px 0px rgba(220, 220, 229, 0.5);
            border-radius: 5px;
            box-sizing: border-box;
            padding: 15px;
            display: flex;
            align-items: center;

            .van-image {
                width: 44px;
                height: 44px;
                margin-right: 20px;
            }

            .child_right {
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                align-content: space-around;

                .titles {
                    font-weight: 500;
                    font-size: 16px;
                    color: #1A1B1C;
                    line-height: 16px;
                    width: 100%;
                }

                .contents {
                    font-weight: 400;
                    font-size: 14px;
                    color: #8492AD;
                    line-height: 14px;
                    width: 100%;
                }
            }
        }
    }
}
</style>